<form class="p-form p-form--stacked">
  <div class="p-form__group row">

    <div class="col-4">
      <label for="full-name-stacked" class="p-form__label">Full name</label>
    </div>

    <div class="col-8">
      <div class="p-form__control">
        <input type="text" id="full-name-stacked" name="fullName" autocomplete="name">
      </div>
    </div>
  </div>
  <div class="p-form__group row">

    <div class="col-4">
      <label for="username-stacked" class="p-form__label">Username</label>
    </div>

    <div class="col-8">
      <div class="p-form__control">
        <input type="text" id="username-stacked" name="username-stacked" autocomplete="username" aria-describedby="exampleHelpTextMessage">
        <p class="p-form-help-text" id="exampleHelpTextMessage">
          30 characters or fewer.
        </p>
      </div>
    </div>
  </div>
  <div class="p-form__group row p-form-validation is-error">

    <div class="col-4">
      <label for="username-stacked-error" class="p-form__label is-required">Email address</label>
    </div>

    <div class="col-8">
      <div class="p-form__control">
        <input type="text" id="username-stacked-error" class="p-form-validation__input" aria-invalid="true" name="username-stackederror" autocomplete="username" aria-describedby="username-error-message-stacked" required>
        <p class="p-form-validation__message" id="username-error-message-stacked">This field is required.</p>
      </div>
    </div>
  </div>
  <div class="p-form__group row">

    <div class="col-4">
      <label for="address-optional-stacked0" class="p-form__label">Address line 1</label>
    </div>

    <div class="col-8">
      <div class="p-form__control">
        <input type="text" id="address-optional-stacked0" name="address-optional-stacked" autocomplete="address-line1">
      </div>
    </div>
  </div>
  <div class="p-form__group row">

    <div class="col-4">
      <label for="address-optional-stacked1" class="p-form__label">Address line 2</label>
    </div>

    <div class="col-8">
      <div class="p-form__control">
        <input type="text" id="address-optional-stacked1" name="address-optional-stacked" autocomplete="address-line3">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <button class="p-button--positive u-float-right" name="add-details">Add details</button>
    </div>
  </div>
</form>
